<template>
  <div id="Drawertool">
    <el-drawer
      v-model="drawer"
      :size="drawerSize"
      class="drawer"
      :destroy-on-close="true"
      @close="handleDrawerClose"
    >
      <template #header="{ titleId, titleClass }">
        <div :id="titleId" :class="titleClass" style="cursor: pointer">
          <!-- justify-content: space-between; -->
          <div
            style="
              display: flex;
              align-items: center;
              height: 100%;
              justify-content: space-evenly;
            "
          >
            <div style="width: 130px" @mouseenter="isChildrenBox = false">
              <div style="margin-right: 20px">工具箱</div>
            </div>

            <div
              @mouseenter="handleTabEnter('1')"
              @click="handleNavClick('1')"
              class="navitem"
              :class="navType == 1 ? 'active-style' : ''"
            >
              <div class="items">
                <img class="imgs" src="@/assets/images/zhaosjihua.png" alt="" />
                <div>招生计划</div>
              </div>
            </div>
            <div
              @mouseenter="handleTabEnter('2')"
              @click="handleNavClick('2')"
              class="navitem"
              :class="navType == 2 ? 'active-style' : ''"
            >
              <div class="items">
                <img class="imgs" src="@/assets/images/fenshuxian.png" alt="" />
                <div>分数线</div>
              </div>
            </div>
            <div
              @mouseenter="handleTabEnter('3')"
              @click="handleNavClick('3-1')"
              class="navitem"
              :class="navType == '3-1' ? 'active-style' : ''"
            >
              <div class="items">
                <img class="imgs" src="@/assets/images/xinxiku.png" alt="" />
                <div>信息库</div>
              </div>
            </div>
            <!-- <div
              @click="handleNavClick('4')"
              class="navitem"
              :class="navType == 4 ? 'active-style' : ''"
            >
              <div style="display: flex; align-items: center">
                <img class="imgs" src="@/assets/images/bangdan.png" alt="" />
                <div>榜单</div>
              </div>
            </div> -->
            <div
              @mouseenter="handleTabEnter('5')"
              @click="handleNavClick('5')"
              class="navitem"
              :class="navType == 5 ? 'active-style' : ''"
            >
              <div class="items">
                <img class="imgs" src="@/assets/images/gengduo.png" alt="" />
                <div>更多</div>
              </div>
            </div>
            <!-- <el-input
              v-model="input2"
              style="width: 240px"
              placeholder="请输入专业内容"
              :suffix-icon="Search"
            /> -->
            <!-- 暂时占位 -->
            <div style="width: 240px"></div>
          </div>
        </div>
      </template>

      <!-- 下级盒子 -->
      <div
        class="children-box"
        v-if="isChildrenBox"
        @mouseleave="handleTabLeave"
      >
        <div
          class="df"
          style="justify-content: space-evenly; align-items: normal"
        >
          <div style="width: 100px"></div>
          <div>
            <div class="children-item f14 curr" @click="handleOpenDraw(0)">
              普通批计划
            </div>
            <div class="children-item f14 curr" @click="handleOpenDraw(1)">
              提前批计划
            </div>
          </div>
          <div>
            <div class="children-item f14 curr" @click="handleOpenScoreLine(0)">
              院校分数线
            </div>
            <div class="children-item f14 curr" @click="handleOpenScoreLine(1)">
              专业分数线
            </div>
          </div>
          <div>
            <div
              class="children-item f14 curr"
              @click="handleCollegeLibrary('3-1')"
            >
              院校库
            </div>
            <div class="children-item f14 curr" @click="handleGoMajorlibrary">
              专业库
            </div>
            <div class="children-item f14 curr" @click="handleGoJorLibrary">
              职业库
            </div>
          </div>
          <div>
            <div class="children-item f14 curr" @click="handleOpenMore(0)">
              批次线
            </div>
            <div class="children-item f14 curr" @click="handleOpenMore(1)">
              一分一段
            </div>
          </div>
          <div style="width: 100px"></div>
          <div style="width: 100px"></div>
        </div>
      </div>
      <!-- 招生计划 -->
      <EnrollmentPlan
        ref="enrollmentPlanRef"
        v-if="navType == 1"
        :selPlanType="selPlanType"
      />

      <!-- 院校分数线 -->
      <CollegeScoreLine ref="collegeScoreLineRef" v-if="navType == 2" />

      <!-- 院校库 -->
      <college-library v-if="navType == '3-1'" ref="collegelibraryRef" />

      <!-- 信息库 -->
      <InformationBase
        v-if="navType == 3"
        :baseData="baseData"
        ref="informationBaseRef"
      />

      <!-- 更多 -->
      <More v-if="navType == 5" :baseData="baseData" ref="moreRef" />
    </el-drawer>
  </div>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue';
// import { Search } from "@element-plus/icons-vue";
import EnrollmentPlan from '../EnrollmentPlan';
import CollegeScoreLine from '../CollegeScoreLine';
import More from '../More';
import InformationBase from '../InformationBase';
import CollegeLibrary from '../CollegeLibrary';
import bus from '@/utils/bus';
const drawerSize = ref('70%');
const informationBaseRef = ref(null);
const isChildrenBox = ref(false);
const baseData = ref({});
const drawer = ref(false);
const navType = ref('1');
const selPlanType = ref(0);

const enrollmentPlanRef = ref(null);
const collegeScoreLineRef = ref(null);
const collegelibraryRef = ref(null);
const moreRef = ref(null);
const handleResize = () => {
  // 获取当前窗口宽度
  let width = window.innerWidth;
  // 根据不同的宽度范围设置 drawerSize 的值
  if (width > 2000) {
    drawerSize.value = '60%';
  } else if (width > 1800) {
    drawerSize.value = '70%';
  } else if (width > 1600) {
    drawerSize.value = '80%';
  } else if (width > 1400) {
    drawerSize.value = '90%';
  } else {
    drawerSize.value = '95%';
  }
};

watch(
  () => drawer.value,
  (newVal) => {
    if (newVal) {
      // 监听窗口尺寸变化事件
      window.addEventListener('resize', handleResize);
      // 立即调用一次以确保在页面加载时也能获取到当前尺寸
      handleResize();
    } else {
      window.removeEventListener('resize', handleResize);
    }
  },
  { immediate: true }
);

const handleNavClick = (type) => {
  navType.value = type;
};
const handleIsShowChildrenBox = () => {
  isChildrenBox.value = false;
};
const handleDrawerClose = () => {
  if (localStorage.getItem('student_id')) {
    localStorage.removeItem('student_id');
  }
};
const handleGoMajorlibrary = () => {
  navType.value = '3-1';
  nextTick(() => {
    collegelibraryRef.value.handleCheckTabs('second');
    handleIsShowChildrenBox();
  });
};
const handleGoJorLibrary = () => {
  navType.value = '3-1';
  nextTick(() => {
    collegelibraryRef.value.handleCheckTabs('third');
    handleIsShowChildrenBox();
  });
};
const handleOpenDraw = (tag) => {
  navType.value = 1;
  nextTick(() => {
    enrollmentPlanRef.value.setActiveName(tag == 0 ? 'first' : 'second');
    handleIsShowChildrenBox();
  });
};

const handleOpenScoreLine = (tag) => {
  navType.value = 2;
  nextTick(() => {
    collegeScoreLineRef.value.setActiveName(tag == 0 ? 'first' : 'second');
    handleIsShowChildrenBox();
  });
};
const handleOpenMore = (tag) => {
  navType.value = 5;
  nextTick(() => {
    moreRef.value.setActiveName(tag == 0 ? 'first' : 'second');
    handleIsShowChildrenBox();
  });
};
const handleCollegeLibrary = (type) => {
  navType.value = type;
  nextTick(() => {
    collegelibraryRef.value.handleCheckTabs('first');
    handleIsShowChildrenBox();
  });
};
const handleTabEnter = () => {
  isChildrenBox.value = true;
};
const handleTabLeave = () => {
  isChildrenBox.value = false;
};
bus.on('handleCollegeDetails', (mydata) => {
  baseData.value = mydata.data;
  navType.value = mydata.type;
  if (mydata.checkType == '1') {
    nextTick(() => {
      informationBaseRef.value.handleTabActiveName();
    });
  }
});
const handleChangeDrawer = (type, selectNav, data, tag, tabsType) => {
  baseData.value = data;
  navType.value = selectNav;

  drawer.value = type;
  selPlanType.value = tag || 0;

  if (navType.value == 1) {
    setTimeout(() => {
      enrollmentPlanRef.value.setActiveName(tag == 0 ? 'first' : 'second');
    }, 100);
  }
  if (navType.value == 2) {
    setTimeout(() => {
      collegeScoreLineRef.value.setActiveName(tag == 0 ? 'first' : 'second');
    }, 100);
  }
  if (navType.value == 5) {
    setTimeout(() => {
      moreRef.value.setActiveName(tag == 0 ? 'first' : 'second');
    }, 100);
  }
  if (tabsType == '3-2') {
    nextTick(() => {
      collegelibraryRef.value.handleCheckTabs('second');
    });
  } else if (tabsType == '3-3') {
    nextTick(() => {
      collegelibraryRef.value.handleCheckTabs('third');
    });
  }
};
defineExpose({
  handleChangeDrawer,
});
</script>

<style lang="scss" scoped>
.drawer {
  height: 500px !important;
}
.children-box {
  position: absolute;
  top: 78px;
  left: 0;
  z-index: 99999;
  // height: 80px;
  background: #fff;
  width: 100%;
  border-top: 1px solid #ccc;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
  .children-item {
    width: 100px;
    text-align: center;
    margin: 20px 0;
    &:hover {
      color: #409eff;
    }
  }
}
.imgs {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.items {
  display: flex;
  align-items: center;
  height: 75px;
  width: 100px;
}
// #titleId{
//     background: red;
// }
.navitem {
  height: 75px;
}
.navitem:hover {
  color: #409eff;
  border-bottom: 3px solid #409eff;
  // padding: 0 0 20px 0;
}
.active-style {
  color: #409eff;

  // border-bottom: 3px solid red;
}
</style>
<style>
.el-drawer__header {
  height: 80px;
  padding: 20px;
  margin-bottom: 0px;
  border-bottom: 1px solid #f2f3f5;
}
</style>
